<div id='wholesale'>
	<a href="#dialog" name="modal"><img src='img/wholesale.jpg'></a>
</div>
<div id="boxes">
			
	<div id="dialog" class="window">
		<span class="bClose" style='top:0px;right:0px'><img src="img/close.png"></span>
		<h2 style='text-align:center'>THÔNG TIN VỀ CHƯƠNG TRÌNH SỈ</h2>
		<p style='font-size: 12px;font-weight:bold;padding-left:10px'>
			Khi tham gia chương trình sỉ bạn sẽ được hưởng những ưu đãi:<br/>
			<ul style='font-size: 12px'>
				<li style='list-style-type:square;margin-bottom:4px;'>Được chiết khấu cao khi mua hàng</li>
				<li style='list-style-type:square;margin-bottom:4px;'>Được hỗ trợ mẫu thử (tuỳ theo đối tượng và sản phẩm)</li>
				<li style='list-style-type:square;margin-bottom:4px;'>Được hỗ trợ nghiệp vụ bán hàng và tư vấn</li>
				<li style='list-style-type:square;margin-bottom:4px;'>Được tập huấn về cách trang điểm và sử dụng mỹ phẩm</li>
				<li style='list-style-type:square;margin-bottom:4px;'>Được cung cấp catalog, brochure, poster, standee</li>
				<li style='list-style-type:square;margin-bottom:4px;'>Được hỗ trợ về tủ kệ trưng bày (tuỳ đối tường và quy mô)</li>
				<li style='list-style-type:square;margin-bottom:4px;'>Và rất nhiều chương trình hỗ trợ khác</li>
			</ul>
		</p>
		<p style='font-size: 12px;font-weight:bold;padding-left:10px'>
			Đừng ngừng ngại. Hãy liên hệ với chúng tôi
		</p>
		<form id='form-wholesale'>
			<table>
				<tr>
					<td width='80px' style='text-align:right'>Họ và tên</td>
					<td width='310px'><input type='text' id='form-name' name='form-name' style='width:200px'>(<span class='mark'>*</span>)</td>
				</tr>
				<tr>
					<td width='80px' style='text-align:right'>Điện thoại</td>
					<td width='310px'><input type='text' id='form-phone' name='form-phone' style='width:200px'>(<span class='mark'>*</span>)</td>
				</tr>
				<tr>
					<td width='80px' style='text-align:right'>Email</td>
					<td width='310px'><input type='text' name='form-email' style='width:200px'></td>
				</tr>
				<tr>
					<td width='80px' style='text-align:right'>Đối tượng</td>
					<td width='320px'><input placeholder="vd: Giáo viên trang điểm, Kinh doanh mỹ phẩm..." type='text' id='form-object' name='form-object' style='width:304px'>(<span class='mark'>*</span>)</td>
				</tr>
				<tr>
					<td width='80px' style='text-align:right'>Nội dung</td>
					<td width='330px'><textarea id='form-content' style='width:300px;height:80px'name='form-content'></textarea>(<span class='mark'>*</span>)</td>
				</tr>
				<tr>
					<td width='80px' style='text-align:right'></td>
					<td width='330px'>(<span class='mark'>*</span>)<em> Nội dung không được để trống</em></td>
				</tr>
				<tr>
					<td width='80px' style='text-align:right'></td>
					<td width='310px' style='text-align:left'><br/><a onclick="javascript: return sendContact()" class='btn btn-primary'>Gởi liên hệ</a></td>
				</tr>
			</table>
			<input type='hidden' name='form-type' value='wholesale'>
		</form>
	</div>
	
	<!-- Mask to cover the whole screen -->
	<div id="mask"></div>
</div>
<script>
	function sendContact()
	{
		var name = $('#form-name').attr('value');
		var phone = $('#form-phone').attr('value');
		var object = $('#form-object').attr('value');
		var content = $('#form-content').val();
		
		if(name =='' || phone=='' || object=='' || content=='')
			alert('Nhập thiếu thông tin bắt buộc');
		else
		{
			$('#mask').hide();
			$('.window').hide();
			
			$.post("ajax/contact.php", $("#form-wholesale").serialize(),function(data)
			{
				alert(data);
			});
		}
	}
	$(document).ready(function() {	
		
		//select all the a tag with name equal to modal
		$('a[name=modal]').click(function(e) {
			//Cancel the link behavior
			e.preventDefault();
			
			var href = $(this).attr("href");
			if(href == "#dialog")
				return;
			
			//Get the A tag
			var id = $(this).attr('href');
			
			//Get the screen height and width
			var maskHeight = $(document).height();
			var maskWidth = $(window).width();
			
			//Set heigth and width to mask to fill up the whole screen
			$('#mask').css({'width':maskWidth,'height':maskHeight});
			
			//transition effect		
			//$('#mask').fadeIn(1000);	
			$('#mask').fadeTo("medium",0.85);	
			
			//Get the window height and width
			var winH = $(window).height();
			var winW = $(window).width();
			
			//Set the popup window to center
			$(id).css('top',  winH/2-$(id).height()/2);
			$(id).css('left', winW/2-$(id).width()/2);
			
			//transition effect
			$(id).fadeIn('slow'); 
			
		});
		
		//if close button is clicked
		$('.window .bClose').click(function (e) {
			//Cancel the link behavior
			e.preventDefault();
			
			$('#mask').hide();
			$('.window').hide();
		});		
		
		//if mask is clicked
		$('#mask').click(function () {
			$(this).hide();
			$('.window').hide();
		});			
		
		$(window).resize(function () {
			
			var box = $('#boxes .window');
			
			//Get the screen height and width
			var maskHeight = $(document).height();
			var maskWidth = $(window).width();
			
			//Set height and width to mask to fill up the whole screen
			$('#mask').css({'width':maskWidth,'height':maskHeight});
			
			//Get the window height and width
			var winH = $(window).height();
			var winW = $(window).width();
			
			//Set the popup window to center
			box.css('top',  winH/2 - box.height()/2);
			box.css('left', winW/2 - box.width()/2);
			
		});
		
	});
	
</script>